<template>
    <div class="sureorder">
        <div class="top" style="position:relative;color:white;background:rgb(52,146,233);text-align: center;padding: 10px;">
            <h2 @click="$router.back()" style="position: absolute;top:6px;font-size: 30px;"><</h2>
            <h2>订单确认</h2>
        </div>
        <div class="shoporder">
            <div class="container" style="padding-bottom: 50px;">
                <el-row style="padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="3">
                        <div class="img">
                            <img :src="$route.query.shopimg" alt="">
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <h5 style="line-height: 30px;">{{this.$route.query.shoptitle}}</h5>
                    </el-col>
                    <el-col :span="1">
                        <h5 style="line-height: 30px;color: gray;"> > </h5>
                    </el-col>
                </el-row>
                <el-row style="font-size:12px;padding: 10px 0;border-bottom: 1px solid gainsboro;">
                   <div v-for="item,index in $route.query.goods">

                       <el-col :span="19">
                           <font style="color: gray;">{{item.menutitle}}</font>
                       </el-col>
                       <el-col :span="3">
                           <h5 style="color: gray;">x{{item.menunum}}</h5>
                       </el-col>
                       <el-col :span="1">
                           <h5 style="color: gray;"> ￥{{item.menunum*item.menumoney}} </h5>
                       </el-col>
                   </div>

                </el-row>
                <el-row style="font-size:13px;padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="22">
                        <div>
                            <font style="color: orange;">配送</font>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <h5 style="color:orange;">￥{{this.$route.query.peisongmoney}}</h5>
                    </el-col>
                </el-row>
                <div style="float: right;margin-top: 15px;color: orange;">
                    <h3>合计：￥{{parseInt(this.$route.query.money)}}</h3>
                </div>
            </div>
        </div>
        <div class="shoporder">
            <div class="container">
                <el-row style="padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="24">
                        <h3>配送信息</h3>
                    </el-col>
                </el-row>
                <el-row style="font-size:12px;padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="24">
                        <font>配送方式：商家配送</font>
                    </el-col>
                </el-row>
                <el-row style="font-size:13px;padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="24">
                        <div>
                            <font>骑手：小王</font>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="shoporder">
            <div class="container">
                <el-row style="padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="24">
                        <h3>订单详情</h3>
                    </el-col>
                </el-row>
                <el-row style="font-size:12px;padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="24">
                        <font>联系人：{{this.$route.query.username}}</font>
                    </el-col>
                </el-row>
                <el-row style="font-size:13px;padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="24">
                        <div>
                            <font>联系电话：{{this.$route.query.userphone}}</font>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="font-size:13px;padding: 10px 0;border-bottom: 1px solid gainsboro;">
                    <el-col :span="24">
                        <div>
                            <font>收货地址：楼号：{{this.$route.query.userdress.dresslou}} 门牌号：{{this.$route.query.userdress.dresssu}}</font>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div style="margin:8px auto;width: 98px;">
            <el-button  @click="addorder" type="primary">提交订单</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "sureorder",
        methods:{
            addorder(){
                var self=this;
                var timestamp = (new Date()).valueOf();
                var img=this.$route.query.shopimg.replace('http://127.0.0.1:3000','');
                var shoptype=[]
                for(var i=0;i<this.$route.query.goods.length;i++){
                    var tamp= {
                        goods:this.$route.query.goods[i].menutitle,
                        num:this.$route.query.goods[i].menunum
                    };
                    shoptype.push(tamp)
                }
                this.axios.post("http://127.0.0.1:3000/AddDingdan",{ShopName:this.$route.query.shoptitle,phone:this.$store.state.phone,shangjiaImage:img,ShopType:shoptype,Money:parseInt(this.$route.query.money),Date:timestamp,OK:true})
                .then((res)=>{
                    this.$store.state.shoplist.push({ShopName:this.$route.query.shoptitle,phone:this.$store.state.phone,shangjiaImage:img,ShopType:shoptype,Money:parseInt(this.$route.query.money),Date:timestamp,OK:true});
                    this.$router.back()
                })
            }
        }
    }
</script>

<style scoped>
    .sureorder{
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: rgb(238,238,238);
    }
    .shoporder{
        background: white;
        padding: 15px;
        margin-bottom: 20px;
    }
    .container{
        width: 95%;
        margin: auto;
    }
    .img{
        width: 30px;
        height: 30px;
        border: 1px solid red;
        border-radius: 50%;
        overflow: hidden;
    }
    .img img{
        width: 100%;
        height: 100%;
    }
</style>